<template>
  <div id="cpn-user-field">
    <div class="userCenter btn">
      <div v-if="isLogin" @click="openPanel">{{ !$chy.isEmpty(user.userInfo) ? user.userInfo.name : '' }}</div>
      <img v-else @click="toLogin" :src="iconUserCenter" alt="">
    </div>
    <transition name="userPanel_fade" mode="out-in">
      <div class="userPanel" v-show="isShowPanel">
        <div class="top"></div>
        <div class="center"></div>
        <div class="bottom">
          <div class="f14 btn" @click="toUserInfo">主页</div>
          <div>｜</div>
          <div class="f14 btn" @click="logout">退出</div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import { getCookie, deleteCookie } from '@/utils/common'
import { logoutApi } from '@/api/user'
export default {
  name: 'user-field',
  data() {
    return {
      iconUserCenter: require('@/assets/img/userCenter.png'),
      isLogin: false,
      isShowPanel: false
    }
  },
  watch: {
    isShowPanel(newVal) {
      !newVal || document.removeEventListener('click', this.addPanelEvent)
    },
    'user.userInfo': {
      handler(newVal) {
        if ($chy.isEmpty(newVal)) {
          this.isLogin = false
        }
      }
    }
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  methods: {
    ...mapActions('user', ['getUserInfo']),
    ...mapMutations('user', ['addUserInfo', 'addLoginSrotage']),
    async openPanel() {
      this.isShowPanel = !this.isShowPanel
      setTimeout(() => {
        if (this.isShowPanel) {
          document.addEventListener('click', this.addPanelEvent)
        }
      }, 1)
    },
    addPanelEvent() {
      this.isShowPanel = false
    },
    toLogin() {
      this.$router.push('/login')
    },
    getUser() {
      const params = {
        id: !$chy.isEmpty(getCookie('user')) ? JSON.parse(getCookie('user')).id : ''
      }
      console.log('params', params)
      this.getUserInfo(params).then(res => {
        this.isLogin = !$chy.isEmpty(res.data)
      })
    },
    logout() {
      this.$confirm('将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        logoutApi({
          id: this.user.userInfo.id
        }).then(res => {
          if (res.code === 1) {
            deleteCookie('user')
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.addUserInfo({})
            // this.addLoginSrotage({})
            this.isLogin = false
            sessionStorage.removeItem('id')
            sessionStorage.removeItem('token')
            this.$router.replace('/index')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消退出登录!'
        })
      })
    },
    toUserInfo() {
      this.$router.push('/userInfo')
    }
  },
  mounted() {
    this.getUser()
  }
}
</script>

<style lang="scss" scoped>
#cpn-user-field {
  position: relative;
  height: 100%;

  .userCenter {
    min-width: 20px;
    padding: 11px 11px;
    margin: 0 5px;
    height: inherit;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    img {
      display: block;
      height: 100%;
    }
  }

  .userPanel {
    position: absolute;
    z-index: 999;
    background: #324157;
    padding: 10px;
    border-radius: 5px;
    top: 58px;
    right: -30px;

    .bottom {
      display: flex;
      width: 90px;
      justify-content: space-evenly;
    }
  }

  .userPanel_fade-enter-active {
    transition: all 0.25s ease;
  }

  .userPanel_fade-leave-active {
    transition: all 0.25s ease;
  }

  .userPanel_fade-enter,
  .userPanel_fade-leave-to {
    position: absolute;
    top: 158px;
    opacity: 0;
  }

  .userPanel_fade-enter-to,
  .userPanel_fade-leave {
    position: absolute;
    top: 58px;
    z-index: 1;
    opacity: 1;
  }
}
</style>
